<template>
    <div>
        <van-popup class="popup-all" :show="showPopup" position="bottom" @update:show="updateShow"
            :style="{ height: '80%' }" round>
            <div class="popup-content">
                <div style="background-color: #fff">
                    <CommonHeader type="黑" leftText="取消" title="选择登录账号" :onLeft="onClickLeft" />
                </div>

                <van-list :loading="loading" :finished="finished" finished-text="已经到底了" class="my-list">
                    <van-cell v-for="(item, index) in dataList" :key="index" class="my-cell">
                        <template #title>
                            <div class="my-cell-title" style="display: flex; justify-content: space-between;">

                                <div>{{ item.userLoginName }}</div>
                                <div style="text-align: right;">
                                    <span v-if="item.userStatus == 1" style="color: #21B689;"
                                        @click="onSelect(item, index)">
                                        登录
                                    </span>
                                    <span v-else style="color: #999;">
                                        账号已禁用
                                    </span>

                                </div>
                            </div>
                        </template>
                        <template #label>
                            <div class="my-cell-label">
                                <div class="my-cell-label">统一社会信用代码：{{ item.enterpriseCode }}
                                </div>
                                <div class="my-cell-label">经销商名称：{{ item.enterpriseName }}
                                </div>
                                <div class="my-cell-label">最后登录时间：{{ item.lastLoginDate }}
                                </div>
                            </div>
                        </template>

                    </van-cell>
                </van-list>
            </div>
        </van-popup>
    </div>
</template>

<script setup>


import { ref, defineProps, defineEmits, watch } from 'vue';
const emit = defineEmits(['update:show', 'data-selected-click']);
const props = defineProps({
    dataValue: {
        type: Array,
        default: null
    },
    isEdit: {
        default: true
    },
    show: {
        default: false
    },
});
watch(() => props.show, (newValue, oldValue) => {
    showPopup.value = newValue
})
watch(() => props.dataValue, (newValue, oldValue) => {
    dataList.value = newValue
})
const dataList = ref(props.dataValue);
const showPopup = ref(props.show);
const loading = ref(false);
const finished = ref(false);

// 处理列表项点击事件
const onSelect = (item, index) => {
    showPopup.value = false;
    emit('data-selected-click', item);
}

const updateShow = (value) => {
    emit('update:show', value);
};
const onClickLeft = () => {
    updateShow(false)
};
</script>

<style scoped>
.popup-content {
    background-color: #F3F9F8;
    height: 100%;
}

.rounded-field {
    border-radius: 32px;
    padding: 8px 16px;
}


.left-text {
    color: black;
    cursor: pointer;
}

.popup-content :deep(.van-search__content) {
    padding: 0 16px;
    background-color: #F1F1F1;
}

.my-list {

    margin: 0 12px 0 12px;
    --van-cell-label-font-size: 12px;
}

.my-cell {
    margin: 12px 0 0 0;
    border-radius: 8px;
    --van-cell-label-font-size: 12px;
}

.my-cell-title {
    font-size: 14px;
}

.my-cell-label {
    font-size: 12px;
    color: #999999;
}
</style>